<template>
	<div class="box">
		<el-card>
			<div slot="header">
				<span>班级各分段人数</span>
			</div>
			<div id="main" :style="{width: '500px', height: '300px'}"></div>
		</el-card>
	</div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
	mounted() {
		this.initChart();
	},
	methods: {
		initChart() {
			var myChart = this.$echarts.init(document.getElementById("main"));
			myChart.setOption({
				title: {
					text: "XXX考试",
				},
				tooltip: {},
				xAxis: {
					data: ["<60", "[60,70)", "[70,80)", "[80,90)", "[90,100)", "100"],
				},
				yAxis: {},
				series: [
					{
						name: "人数",
						type: "bar",
						data: [5, 20, 36, 10, 10, 20],
					},
				],
			});
		},
	}
}
</script>

<style scoped>
#main {
	margin: auto;
}
.box {
	width: 100%;
	height: 100%;
}
</style>
